<template>
    <el-form label-width="100px" ref="form">
        <el-form-item label="功能说明">
            <pre>服务器每天9点会自动抓取所有主播（跳过没有小葫芦ID的主播）的小葫芦数据。
不需要选择日期是因为会直接抓取最近30天的小葫芦数据。</pre>
        </el-form-item>
        <el-form-item>
            <el-button @click="submit" type="primary"
                       :loading="loading"
                       :disabled="!anchor._id || disabled">抓取
            </el-button>
            <el-alert type="error" title="每天早上9点后才会开放补抓功能" v-if="disabled"/>
            <el-alert type="error" title="该主播没有小葫芦ID，不支持补抓功能" v-if="!anchor._id"/>
        </el-form-item>
    </el-form>
</template>

<script>
    import moment from 'moment';

    export default {
        name: "anchor_data_collection",
        props: {anchor: {required: true}},
        data() {
            let yesterday = moment().subtract(1, 'day').startOf('day').toDate();
            let before30Day = moment().subtract(30, 'day').startOf('day').toDate();
            return {
                loading: false,
                pickerOption: {
                    disabledDate(time) {
                        return time > yesterday || time < before30Day;
                    },
                },
                form: {date: null},
            };
        },
        methods: {
            submit() {
                this.loading = true;
                let date = moment(this.form.date).format('YYYY-MM-DD');
                this.$http.get('/api/xiaohulu/data/' + this.anchor.id + '/' + date).then(res => {
                    this.loading = false;
                    this.$message.success(res.data);
                }).catch(err => {
                    this.loading = false;
                    this.$message.error(err.response.data);
                });
            },
        },
        computed: {
            disabled() {
                let now = moment().toDate();
                let target = moment().set({hour: 9, minute: 0, second: 0}).toDate();
                // console.log('enable', now < target);
                return now < target;
            }
        },
    }
</script>

<style scoped>

</style>